<script setup>

import UNavbar from "@/uni_modules/uview-plus/components/u-navbar/u-navbar.vue";
import {fahuo, getXiaoshoudan, paidan} from "@/request/api";
import {ref} from "vue";
import {onLoad} from "@dcloudio/uni-app";
import {BASEURL} from "@/request/request";

const orderId = ref(0);//订单id
const orderDetail = ref({});//订单详情
const goodsIndex = ref(0);//
const disabled = ref(false);//
const push = ref(false);//true 发货 false派单
onLoad((query) => {
  orderId.value = query.id;
  disabled.value = !!query.disabled
  push.value = !!query.push
  getInfo();
})
const getInfo = () => {
  getXiaoshoudan({
    id: orderId.value
  }).then(res => {
    orderDetail.value = {...res.data};
  })
}
const prevImage = () => {
  uni.previewImage({
    current: 0,
    urls: [BASEURL + orderDetail.value.goods[goodsIndex.value].file]
  })
}
const handlerSubmit = () => {
  if (push.value) {
    /*  for (const goods of orderDetail.value.goods) {
        if (!goods.chejian) return uni.showToast({
          title: `请填写${goods.name}的实际发货`,
          icon: 'none'
        });
      }
  */
    fahuo({
      id: orderId.value,

    }).then(() => {
      uni.showToast({
        title: '发货成功',
        icon: 'none'
      });
      setTimeout(() => {
        uni.navigateBack();
      }, 1000)
    })
  } else {
    for (const goods of orderDetail.value.goods) {
      if (!goods.chejian) return uni.showToast({
        title: `请填写${goods.name}的车间`,
        icon: 'none'
      });

    }
    paidan({
      id: orderId.value,
      goods: orderDetail.value.goods.map(item => {
        return {id: item.id, chejian: item.chejian}
      })
    }).then(() => {
      uni.showToast({
        title: '派单成功',
        icon: 'none'
      });
      setTimeout(() => {
        uni.navigateBack();
      }, 1000)
    });
  }

}
const handlerCopy = () => {
  let data = orderDetail.value.goods;
  let str = '';
  data.forEach(item => {
    if (item.num1){
      str += `
      ****************************************
      产品名称：${item.name}
      产品规格：${item.guige}
      包装规格：${item.baozhuangguige}
      产品吨数：${item.num}
      产品吨价：${item.price}
      产品箱数：${item.num1}
      产品箱价：${item.price1}
      附件链接：${BASEURL + item.file}
      车间：${item.chejian}
      ****************************************
    `
    }else {
      str += `
      ****************************************
      产品名称：${item.name}
      产品规格：${item.guige}
      包装规格：${item.baozhuangguige}
      产品吨数：${item.num}
      产品吨价：${item.price}
      附件链接：${BASEURL + item.file}
      车间：${item.chejian}
      ****************************************
    `
    }

  })
  uni.setClipboardData({
    data: str,
    success() {
      uni.showToast({
        title: '复制成功',
        icon: "none"
      })
    }
  })
}
</script>
<template>
  <view class="dispatch-info-page">
    <u-navbar placeholder :title="push?'发货信息':'产品信息'"></u-navbar>
    <scroll-view scroll-y class="scroll-y">
      <view class="content">
        <view class="container">
          <view class="info-item">
            <text>销售经理:</text>
            <text>{{ orderDetail.number }}</text>
          </view>
          <view class="info-item">
            <text>客户电话:</text>
            <text>{{ orderDetail.mobile }}</text>
          </view>
          <view class="info-item">
            <text>到货地址:</text>
            <text>{{ orderDetail.address }}</text>
          </view>
        </view>
        <view class="products-info">
          <text>产品信息</text>
          <view class="products-list">
            <view @click="goodsIndex = index" :class="{
              active:goodsIndex===index
            }" v-for="(item,index) of orderDetail.goods" :key="index">
              <text>{{ item.name }}</text>
            </view>
          </view>
          <view class="container">
            <view class="info-item">
              <text>产品名称:</text>
              <text> {{ orderDetail.goods[goodsIndex].name }}</text>
            </view>
            <view class="info-item">
              <text>产品规格:</text>
              <text> {{ orderDetail.goods[goodsIndex].guige }}</text>
            </view>
            <view class="info-item">
              <text>包装规格:</text>
              <text> {{ orderDetail.goods[goodsIndex].baozhuangguige }}</text>
            </view>
            <view style="display: flex;align-items: center;justify-content: space-between">
              <view class="info-item">
                <text>产品吨数:</text>
                <text> {{ orderDetail.goods[goodsIndex].num }}</text>
              </view>
              <view class="info-item">
                <text>产品吨价:</text>
                <text> {{ orderDetail.goods[goodsIndex].price }}</text>
              </view>
            </view>
            <view v-if="orderDetail.goods[goodsIndex].num1" style="display: flex;align-items: center;justify-content: space-between">
              <view class="info-item">
                <text>产品箱数:</text>
                <text> {{ orderDetail.goods[goodsIndex].num1 }}</text>
              </view>
              <view class="info-item">
                <text>产品箱价:</text>
                <text> {{ orderDetail.goods[goodsIndex].price1 }}</text>
              </view>
            </view>
            <view class="info-item">
              <text>产品定金:</text>
              <text> {{ orderDetail.goods[goodsIndex].dingjin }}</text>
            </view>
          </view>
        </view>

        <view class="null"></view>
        <view class="container">
          <view style="display: flex;flex-direction: column" @click="prevImage" class="info-item">
            <text>附件:</text>
            <image style="margin-top:24rpx;height:500rpx;margin-left:unset;width: 100%;"
                   :src="BASEURL+orderDetail.goods[goodsIndex].file" mode="aspectFill"></image>

          </view>
          <view class="info-item">
            <text>备注:</text>
            <text style="margin-left: 87rpx;">{{ orderDetail.remark || '无' }}</text>
          </view>

        </view>
        <view class="container">
          <view class="info-item">
            <text>车间:</text>
            <text style="margin-left: 87rpx;">{{ orderDetail.goods[goodsIndex].chejian || '无' }}</text>
          </view>
        </view>
        <view class="null"></view>
        <view style="height: 33rpx"></view>
        <view v-if="!push" class="input-item">
          <text>车间</text>
          <view class="input">
            <input type="text" v-model="orderDetail.goods[goodsIndex].chejian" placeholder="请输入车间"
                   placeholder-style="color:rgba(176, 183, 191, 1);">
          </view>
        </view>
        <view v-if="false" class="input-item">
          <text>实际发货</text>
          <view class="input">
            <input type="text" v-model="orderDetail.goods[goodsIndex].chejian" placeholder="请填写实际发货产品吨位"
                   placeholder-style="color:rgba(176, 183, 191, 1);">
          </view>
        </view>

        <view v-if="!disabled" @click="handlerSubmit" class="submit">{{ push ? '确认信息' : '确认派单' }}</view>
        <view v-else @click="handlerCopy" class="submit">复制产品信息</view>

      </view>
    </scroll-view>
  </view>
</template>


<style scoped lang="scss">
.dispatch-info-page {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;

  .content {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 30rpx 0;
    background-color: #fff;

    .submit {
      width: 597rpx;
      height: 96rpx;
      background: #3563FF;
      border-radius: 48rpx;
      margin-top: 100rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 500;
      font-size: 30rpx;
      color: #FFFFFF;
      line-height: 36rpx;
    }

    .input-item {
      width: 100%;
      padding: 0 30rpx 56rpx 30rpx;
      display: flex;
      flex-direction: column;

      .input {
        padding: 0 30rpx;
        display: flex;
        align-items: center;
        width: 100%;
        height: 96rpx;
        background: #F5F6FA;
        border-radius: 12rpx 10rpx 10rpx 10rpx;

        .upload {
          width: 40rpx;
          height: 40rpx;
          margin-left: 30rpx;
        }

        .down {
          width: 10rpx;
          height: 10rpx;
          margin-left: 30rpx;
        }

        input {
          flex-grow: 1;
          font-weight: 400;
          font-size: 28rpx;
          color: #333333;
        }
      }

      > text {
        font-weight: 500;
        margin-bottom: 23rpx;
        font-size: 28rpx;
        color: #0F161E;
      }
    }

    .null {
      width: 100%;
      height: 16rpx;
      background: #F5F5F5;
    }

    .products-info {
      display: flex;
      flex-direction: column;
      width: 100%;

      .products-list {
        padding: 30rpx 30rpx 40rpx 30rpx;
        display: flex;
        flex-wrap: wrap;
        gap: 26rpx;

        > view {
          padding: 0 40rpx;
          height: 72rpx;
          background: #FFFFFF;
          border-radius: 36rpx;
          border: 1px solid #3563FF;
          display: flex;
          align-items: center;
          position: relative;
          justify-content: center;

          &.active {
            background: #3563FF;

            text {
              color: #fff;
            }
          }

          image {
            position: absolute;
            width: 40rpx;
            height: 40rpx;
            top: -11rpx;
            right: 0;
          }

          text {
            font-weight: 500;
            font-size: 24rpx;
            color: #3563FF;
          }
        }
      }

      > text {
        width: 100%;
        padding: 0 30rpx;
        height: 86rpx;
        background: #F5F5F5;
        display: flex;
        align-items: center;
        font-weight: 500;
        font-size: 28rpx;
        color: #0F161E;
      }
    }

    .info-item {
      border-bottom: 1rpx solid #eee;
      display: flex;
      padding: 30rpx 0 18rpx 0;

      image {
        width: 40rpx;
        height: 40rpx;
        margin-left: 87rpx;
      }

      &:last-child {
        border-bottom: unset;
      }

      text:last-child {
        font-weight: 400;
        margin-left: 32rpx;
        flex: 1;
        font-size: 28rpx;
        color: #333333;
      }

      text:first-child {
        font-weight: 500;
        font-size: 28rpx;
        color: #0F161E;
      }
    }

    .container {
      padding: 0 30rpx;
      background-color: #fff;
      width: 100%;
      display: flex;
      flex-direction: column;

    }
  }
}
</style>
